<template>
    <div>
        <PageTitle v-if="system">
            <h1><router-link :to="{ name: 'Assets' }">Assets</router-link> <i class="material-icons">chevron_right</i> <router-link :to="{ name: 'Asset', params: { id: system.asset.id } }">{{system.asset.name}}</router-link> <i class="material-icons">chevron_right</i> <router-link :to="{ name: 'AssetSystems', params: { id: system.id } }">{{system.name}}</router-link> <i class="material-icons">chevron_right</i> Components</h1>
        </PageTitle>

        <Panel>
            <div class="toolbar">

                <select name="" id="viewSort">
                    <option value="all-items">View: All Items</option>
                    <option value="5">5 miles</option>
                </select>
                <div class="right">
                    <button class="toolbar__btn edit-view-button">
                        Edit View
                    </button>
                    <button class="toolbar__btn create-new-view-button filled">
                        Create New View
                    </button>
                </div>

            </div>
            <SortableTable v-if="system" :array="system.components" :columns="columns"></SortableTable>
        </Panel>

    </div>
</template>
<script>
    import axios from 'axios'
    import SortableTable from './SortableTable.vue'
    import Panel from './Panel.vue'
    import PageTitle from './PageTitle.vue'

    export default {
        components:{
            SortableTable,
            Panel,
            PageTitle
        },
        data() {
            return {
                system: null,
                columns: [
                    {
                        name: 'ID',
                        slug: 'link'
                    },
                    {
                        name: 'Name',
                        slug: 'name'
                    }
                ]
            }
        },

        methods: {
            fetchData: function() {
                var self = this;

                axios.get(process.env.API_ROOT + '/systems/' + this.$route.params.id, {
                })
                    .then(function(response) {
                        self.system = response.data;

                        _.forEach(self.system.components, function(component) {
                            component.link = '<a href="#/component/' + component.id + '" class="">' + component.id + '</a>';
                            component.name = '<a href="#/component/' + component.id + '" class="">' + component.name + '</a>';
                        });

                        console.log(self.system);
                    });
            },
        },

        mounted: function() {

        },
        created: function() {
            this.fetchData()
        },
        props: [
            'id'
        ],
        watch: {
            '$route': 'fetchData',
        }
    }
</script>